<%@page import="com.thinktank.dao.BoardDao"%>
<%@page import="com.thinktank.vo.Board"%>
<%@page language="java" contentType="text/html; charset=UTF-8"%>
<%@page import="java.util.*"%>
<%@page import="java.text.SimpleDateFormat" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
<head>
	<title>게시판</title>
<style type="text/css">
	* {
	background: #f4f4f4;
	color:#555;
	font-size:14px;
	}
	  
	a{
		text-align:center;
		text-decoration: none;
		color:#555;
		font: 1.1em Georgia, "Times New Roman", Arial, Sans-Serif;
	}
	
	a:hover{
	font-weight: bold;
	}
	
	#title {
		font-size:20px;
		font-style: oblique;
		text-decoration: underline;
	}
	
	
	#time
	{
		align:right;	
	}
		


	#cont2left{
		float:left;
		width:83%;
	}
	
	#cont2right{
		float:left;
		width:15%;
		text-align: right; 
	}
	
	#reply_sub {
		margin-top: 200px;
		text-align: center;
		border-bottom: 1px dotted black;
	}
	#reply_show{
		width: 100px;
		margin-top: 10px;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
	}
	.reply_input {
		border: 1px solid #999;
		background-color: white;
		margin: 3px;
	}
	
	#reply_content {
		margin-top: 5px;
		margin-bottom: 10px;
		margin-left: 50px;
		font: 0.9em Georgia, "Times New Roman", Arial, Sans-Serif;
	}
	
	#reply_writer{
		color: #555;
		font: 0.9em Georgia, "Times New Roman", Arial, Sans-Serif;
		font-weight: bold;
	}
	
	.reply_title{
		font: 0.9em Georgia, "Times New Roman", Arial, Sans-Serif;
	}
	
	#reply_register {
		border: 0;
		font-size: 15px;
		margin-bottom: 10px;
	}
	
	
	
#board_content_top{
	margin-top: 50px;
	border-bottom: 1px dotted #999;
}

#board_title_table {
	width: 680px;
}

#title_left {
	text-align: left;
	font: 1.1em Georgia, "Times New Roman", Arial, Sans-Serif;
	font-weight: bold;
	color: #000;
}

#title_right {
	text-align: right;
	font: 1.1em Georgia, "Times New Roman", Arial, Sans-Serif;
}

#board_content{
	border-bottom: 1px dotted #999;
	margin-bottom: 10px;
}

#board_content_text {
	font: 0.9em Georgia, "Times New Roman", Arial, Sans-Serif;
	line-height: 25px;
	padding: 10px;
}
	


</style>
<script type="text/javascript">
function setIFrameHeight(obj){
    if(obj.contentDocument){
        obj.height = obj.contentDocument.body.offsetHeight + 250;
    } else {
        obj.height = obj.contentWindow.document.body.scrollHeight;
    }
}

window.onload = function() {
	var show = document.getElementById("reply_show");
	var reply_register = document.getElementById("reply_register");
	reply_register.onmouseover = function() {
		reply_register.style.cursor = "pointer";
		reply_register.style.fontWeight = "bold";
		reply_register.onmouseout = function() {
			reply_register.style.fontWeight = "normal";
		};
	};
	show.style.display = "none";
	myDisplay();
};
	
function myDisplay() {
	var reply_click = document.getElementById("reply_click");
	var reply_show = document.getElementById("reply_show");
	reply_click.onclick = function toggle() {
	    if (reply_show.style.display == 'none') {
	    	reply_show.style.display='block';
	    }
	    else {
	    	reply_show.style.display='none';
	    }
	};
};

function limit(form) {
	if(form.rContent.value.length>46){
		alert("더이상 입력이 불가능합니다.");
		form.rContent.focus();
	}
};
function submit1(form) {
	num = form.rContent.value;
	if(num.length>48){
		alert("입력이 제한됩니다.");
		return form.rContent.focus();
	}
};

</script>
</head>
<body>
	<div>
		<div id="board_content_top">
			<table id="board_title_table">
				<tr>
					<td id="title_left">ㆍ ${board.bSubject}</td>
					<td id="title_right">${board.bDate2}</td>
				</tr>
			</table>
		</div>		
		<div id="board_content">
			<h3>첨부</h3>
			<c:forEach var="n" items="${files }">
				<a href="../upload/${ n.path }" target="new">${ n.src }</a>
				<a href="../album/albumDelete.do?path=${n.path }&bNo=${ board.bNo }" target="_self">X</a>
				<br />
			</c:forEach>
			<p id="board_content_text">${board.bContent}</p>		
		</div>

		<div id="conbottom">	
			<div id="cont2left">
				<a href="#" id="reply_click">댓글</a>&nbsp;&nbsp;↓
				<table id="reply_show">
					<tr>
						<td colspan="4">
							<form action="replyRegProcess.do?bNo=${board.bNo}" method="post">
									<div>
										<input type="hidden" name="rWriter" value="${ member.mNo }" />
										<input type="text" class="reply_input"  value="${ member.mName }" disabled placeholder="Name" maxlength="6" size="4" /><br />
										<textarea class="reply_input" name="rContent" cols="40" rows="2" placeholder="Content" maxlength="50" style="overflow:hidden" onkeydown="limit(this.form)"></textarea>
										<input type="submit" value="v 등록 " id="reply_register" onclick="submit1(this.form)" />&nbsp;&nbsp;
									</div>
							</form>	
						</td>
					</tr>
					<c:forEach var="r" items="${list }" >
					<tr>
						<td width="10%">ㄴ</td>
						<td width="70%" id="reply_writer">${r.rWriter }</td>
						<td width="15%" class="reply_title">${r.rDate }</td>
						<td width="5%" class="reply_title"><a href="boardReplyDeleteProcess.do?rNo=${r.rNo }&bNo=${board.bNo}">삭제</a></td>
					</tr>
					<tr>
						<td colspan="4">
							<div id="reply_content">${r.rContent }</div>
							<hr style="border:#ddd 1px dotted" />
						</td>
					</tr>
					</c:forEach>
				</table>
			</div>
				
			<div id="cont2right">			
				<p><a href="boardEdit.do?bNo=${board.bNo}">수정</a>&nbsp;
				<a href="boardDeleteProcess.do?bNo=${board.bNo}" target="_parent">삭제</a>&nbsp;</p>						
			</div>	
		</div>		
	</div> <!-- content end -->
	<script>
			document.body.scrollIntoView(true);
			parent.document.all.inner1.height = document.body.scrollHeight;
	</script>
	
</body>
</html>